<template>
    <div class="big">
        <div class="center">
            <div class="imgput">
<!--                <img src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" alt="">-->
                    <p>欢迎进入问卷星</p>
            </div>
            <el-form class="ruleForm" label-width="60px" :model="datas" :rules="myrules" ref="reset1" @keyup.enter.native="logins">
                <el-form-item prop="uname" label="用户名">
                    <el-input prefix-icon="iconfont icon-user" v-model="datas.uname"></el-input>
                </el-form-item>
                <el-form-item prop="upass" label="密码">
                    <el-input type="password" prefix-icon="iconfont icon-3702mima" v-model="datas.upass"></el-input>
                </el-form-item>
                <el-form-item class="btnsub">
<!--                    <el-button type="info" @click="resets">重置</el-button>-->
                    <el-button type="success" @click.native.prevent="register" >注册</el-button>
                    <el-button type="primary" @click.native.prevent="logins" >登陆</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
    import {Login,New} from "../../network/user";
    import {setTokenUser,setUserId} from "../../utils/auth";

    export default {
        name: "Login",
        data() {
            return {
                //默认的账号
                datas: {
                    uname: 'a11',
                    upass: '11'
                },
                //表单验证
                //表单验证时候要与上面默认账号所对于的键 对应
                myrules: {
                    username: [
                        {required: true, message: '请输入名称', trigger: 'blur'},
                        {min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '请输入密码', trigger: 'blur'},
                        {min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur'}
                    ]
                }
            }
        },
        methods: {
            register() {
                this.$refs.reset1.validate(async vals => {
                    if (!vals) return;
                    New(this.datas).then(res => {
                        if (res === 1) {
                            this.$message({
                                message: '注册成功',
                                type: 'success',
                            });
                        } else if (res === -1) {
                            this.$message.error('该用户已存在',1000);
                        } else {
                            this.$message.error('注册失败',1000);
                        }
                    })
                })
            },
            //对表单预处理
            logins() {
                this.$refs.reset1.validate(async vals => {
                    if (!vals) return;
                    Login(this.datas).then(res => {
                        if (res > 0) {
                            this.$message({
                                message: '登陆成功',
                                type: 'success'
                            });
                            setTokenUser(this.datas.uname);
                            setUserId(res);
                            this.$store.state.user = this.datas.uname;
                            this.$router.push("home");
                        } else {
                            this.$message.error('登陆失败',1000);
                        }
                    });
                })

            }
        }
    }
</script>

<style scoped>
    .big{
        height: 100%;
        width: 100%;
        background-image: url("../../assets/back.jpg");
        background-size: 100% 100%;
        background-attachment: fixed;
        background-repeat:no-repeat;
    }
    .center{
        width: 30%;
        height:45%;
        background-color: white;
        border-radius: 5px;
        margin:auto;
        position: relative;
        top: 25%;
    }
    .imgput{
        width: 50%;
        position: relative;
        /*transform: translate(0, -50%);*/
        margin: auto;
        text-align: center;
        /*border: 1px solid #eee;*/
        padding: 10px;
        padding-top: 8%;
        /*border-radius: 50%;*/
        /*box-shadow: 0 0 10px #ddd;*/
        background-color: #fff;
    }
    .imgput img{
        width: 100%;
        height: 100%;
        border-radius: 50%;
    }
    .ruleForm{
        position: absolute;
        bottom: 10px;
        width: 100%;
        padding: 20px;
        box-sizing: border-box;
    }
    .btnsub{
        display: flex;
        justify-content: flex-end;
    }
</style>
